<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Title</title>
</head>
<body>
<canvas></canvas>
<script type="text/javascript">
    var canvas = document.createElement('canvas');
    canvas.width = 500;
    canvas.height = 400;
    canvas.style.border = '1px solid red';
    document.body.appendChild(canvas);
    //获取CanvasRenderingContext2D对象
    var context = canvas.getContext('2d');
    //设置起点
    context.moveTo(0,0);
    //绘制直线
    context.lineTo(500,400);
    //设置起点
    context.moveTo(0,400);
    //绘制直线
    context.lineTo(500,0);
    //描边显示效果
    context.stroke();
</script>
</body>
</html>